
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js" ></script>
</head>
<body>
    
    <div id="app">
        <!-- 
            style 样式处理:
            对象语法:
                <div v-bind:style='{border:borderStyle,width:widthStyle,height:heightStyle}'>这是文字</div>    
                <div v-bind:style='objStyles'>这是文字</div>
            数组语法: 
                <div v-bind:style='[objStyles,overrideStyles]'>这是文字</div>
                后面的会把前面的样式覆盖掉
        -->
        <div v-bind:style='{border:borderStyle,width:widthStyle,height:heightStyle}'>这是文字</div>
        <div v-bind:style='objStyles'>这是文字</div>
        <div v-bind:style='[objStyles,overrideStyles]'>这是文字</div>
        <button @click='handle'>切换</button>
        
    </div>

    <script type="text/javascript">
       var vm = new Vue({
            el:'#app',
            data:{
                borderStyle:'1px solid blue',
                widthStyle:'100px',
                heightStyle:'200px',
                objStyles:{
                    border:'1px solid green',
                    width:'200px',
                    height:'100px'
                },
                overrideStyles:{
                    border:'5px solid orange',
                    backgroundColor:'blue'
                },
            },
            methods:{
                handle:function(event){
                    this.heightStyle = '100px';
                    this.objStyles.width = '100px';
                }
            }
       })      
       
    </script>
</body>
</html>


       